let cartList = [
    {
      id: 11,
      name: 'OPPO Find X3',
      pic: 'https://img11.360buyimg.com/seckillcms/s280x280_jfs/t1/182306/24/14268/71347/60f150b9Ebb18e84c/b944d55c5d33bf82.jpg.webp',
      price: 3469,
      number: 1,
      ischecked: false
    },
    {
      id: 12,
      name: '卡西欧',
      pic: 'https://img30.360buyimg.com/seckillcms/s260x260_jfs/t1/209132/5/20262/96415/6254dbcdEc4b991fc/0f01c27574121b97.jpg.webp',
      price: 6653,
      number: 1,
      ischecked: true
    },
    {
      id: 13,
      name: '乐乐趣宝宝点读认知发声书',
      pic: 'https://img12.360buyimg.com/babel/s320x320_jfs/t1/177821/34/19497/131634/611b215bE14339945/9cc3628df54baf85.jpg!cc_320x320.webp',
      price: 122,
      number: 1,
      ischecked: false
    },
    {
      id: 14,
      name: '漫步者耳机',
      pic: 'https://img20.360buyimg.com/jdcms/s300x300_jfs/t1/221833/36/13333/106709/6232eca8Efae61da8/cb90fc4344c90a1b.jpg.webp',
      price: 2431,
      number: 1,
      ischecked: true
    }
  ]

   // 渲染页面
  let str = cartList.map(item => {
    const { name, id, pic, price } = item
    return `
      <tr align="center">
        <td>
          <input class="check" type="checkbox">
        </td>
        <td>${id}</td>
        <td>${name}</td>
        <td class="img">
          <img src=${pic} style="width:70px;height:70px;" alt="">
        </td>
        <td class="price">${price}</td>
        <td class="num">
          <span class="reduce">-</span>
          <input value="1" type="text">
          <span class="add">+</span>
        </td>
        <td class="account">${price}</td>
        <td>
          <button class="del">删除</button>
        </td>
      </tr>
      `
  }).join('')

  // 获取tbody
  const tbody = document.querySelector('tbody')
  tbody.innerHTML = str

  // 打开页面渲染
  getSum()

  // 全选模块
  $('th input').change(function () {
    // console.log($(this).prop('checked'));
    //设置小选按钮状态
    $('.check').prop('checked', $(this).prop('checked'))

    getSum() //页面刚打开获取总价和数量
  })

  // 小复选框
  $('.check').change(function () {
    $('th input').prop("checked", $(".check:checked").length === $(".check").length);

    getSum() //页面刚打开获取总价和数量
  })

  // 增加商品数量
$('.add').click(function () {
    //得到当前兄弟文本框的值
    let num = $(this).siblings('input').val()

    // 更改数量，后运算，在改值
    num++

    // 赋值给它的上一个兄弟
    $(this).siblings('input').val(num)

    // 找到爷爷的兄弟
    // console.log($(this).parents('.num').siblings('.price'));

    let price = $(this).parent().siblings('.price').text()

    //更改小计的html
    $(this).parent().siblings('.account').html(num * price)

    getSum() //页面刚打开获取总价和数量
})

 // 减少商品数量
$('.reduce').click(function () {
    //得到当前兄弟文本框的值
    let num = $(this).siblings('input').val()

    // 更改数量，后运算，在改值
    num--

    //判断条件 限制数字不能大于等于0，如果输入大于或等于0则给提示 结束函数
    if (num <= 0) {
        return alert('商品数量至少为一个') //return 结束函数，等于0不需要赋值
    }

    //赋值给它的上一个兄弟
    $(this).siblings('input').val(num)


    // 找到爷爷的兄弟
    // console.log($(this).parents('.num').siblings('.price'));

    let price = $(this).parent().siblings('.price').text()

    //更改小计的html
    $(this).parent().siblings('.account').html(num * price)

    getSum() //页面刚打开获取总价和数量
})

// 输入商品数量
$('input[type=text]').change(function () {
    const num = $(this).val()
    // 小计
    // 获取商品单价
    const price = $(this).parent().siblings('.price').text()
    $(this).parent().siblings('.account').text(price * num)

    // 输入商品数量时渲染
    getSum()
})

// 删除
$('.del').click(function () {
    // 删除一个小item
    $(this).parents('tr').remove()

    if (!$('tbody tr').length) {
        tbody.innerHTML = `
           <tr>
            <td colspan="8" align="center">暂无商品信息</td>
           </tr> 
           `
    }
    // 删除时渲染
    getSum()
})

function getSum() {
    // 声明变量 
    let count = 0 //总数量
    let money = 0 //总价格

    //遍历被选中的商品
   $('.check:checked').each(function (i, item) {
    count += +$(item).parent().siblings('.num').children('input').val()
    money += +$(item).parent().siblings('.account').text()
  })

    // console.log(money);
    // console.log(count);

    // 设置页面的总价和数量
    $('.totalNum i').text(count)
    $('.totalPrice i').text(money.toFixed(2))
}


